import React, { Component } from 'react';
require('./css/frame.css');

export default  class P2  extends Component {
	constructor(...args){
		super(...args);
		this.state={
			t0:false,
			t1:false,
		}
	}
	onClick(){
		this.setState({
			t0:true
		})
	}
	onOver(e){
		if (e.currentTarget.getAttribute('id') == 'g0'){
			this.setState({
				t0:true
			})
		}else{
			this.setState({
				t1:true
			})
		}
	}
	onOut(){
		this.setState({
			t0:false,
			t1:false,
		})
	}
	render(){
		const { t0,t1 }=this.state;
		return (
            <div id="page">
                <div className="content" id="box2">
                    <h4 className="title">众智APP产品介绍</h4>
					<p className="par">扫取二维码可下载APP。</p>
					<p className="par" style={{width:'220px'}}>目前仅支持安卓手机！车辆上市后可支持苹果手机！</p>
                    <div className="bgimg" style={{marginTop:'-40px'}}>
                        <img src={require("./img/3_03.jpg")} />
                    </div>
                </div>

				


				 <img
					src={require("./img/red0.png")}
					className="circle"
					style={{left:'500px',top:"103px"}}
					onClick={this.onClick.bind(this)}
					onMouseOver={this.onOver.bind(this)}
					onMouseOut={this.onOut.bind(this)}
					id='g1'
				/>


				{t1 && <div className="tips" style={{left:'430px',top:"155px"}} id="tip1">
					<span className="topspan2" style={{left:'65px',top:"-30px"}}></span>
					<div className="tipcont" id="words">
						<p>连接状态：</p>
						<p><img src={require("./img/ma0.jpg")} alt=""/>手机与车机未连接</p>
						<p><img src={require("./img/ma1.jpg")} alt=""/>手机与车机正在连接</p>
						<p><img src={require("./img/ma2.jpg")} alt=""/>手机与车机已连接</p>
					</div>
				</div>}
            </div>
		);
	}
}


